<template>
<div class="card rdsp-card-view" data-page="alarmChange">
	<div class="card-content rank-content card-content-padding alarmChange-card-content">
    <div class="rdsp-card-title">
        <span>警情变化</span>
    </div>
		<div class="alarmChange-top">
			<div @click="showAlarmList()">
				<span class="one" id="alarmChange_time_num_{{getNewId}}">0</span>
				<p>实时总数</p>
			</div>
			<div @click="showAlarmList()">
				<span class="two" id="alarmChange_noDeal_num_{{getNewId}}">0</span>
				<p>未处理总数</p>
			</div>
			<div @click="showAlarmList()">
				<span class="three" id="alarmChange_todayDeal_num_{{getNewId}}">0</span>
				<p>今日总数</p>
			</div>
		</div>
		<div style="margin-top: 50px;" class="rdsp-card-con alarmChange-line-chart"	id="alarmChange_line_chart_{{getNewId}}"></div>
</template>
<style scoped>
.alarmChange-line-chart {
	height: 260px;
}
.alarmChange-top {
	padding-top: 20px;
}
.alarmChange-top div {
	width: 33%;
	height: 100%;
	float: left;
	text-align: center;
	color: rgba(68, 68, 68, 1);
}
.alarmChange-top .one {
	color: rgba(250, 124, 90, 1);
}
.alarmChange-top div span {
	font-size: 24px;
}
.alarmChange-top div p {
	font-size: 14px;
	font-family: PingFangSC-Regular;
	font-weight: 400;
	color: rgba(153, 153, 153, 1);
}
</style>

<script>
    return {
        beforeCreate() {
        
        },
        data: function () {
            return {
                getNewId: (new Date()).getTime()
            }
        },
        methods: {
        	showAlarmList:function(){
            	app.router.navigate("/historyPoliceApply/2/-1/0/0/"+(single_Orgid||0)+"/0/");
            },
            drawChartData: function () {
                var self = this;
                var now = new Date();
                var oneday = 1000 * 60 * 60 * 24;
                var id_org="";
                var total=0
                var xArray=[];
                var yArray1=[];
                var yArray2=[];
                if (single_Orgid == "") {

                    id_org = userInfor.organizationIds;
                } else {
                    id_org = single_Orgid;
                }
                var todaySTime = now.getFullYear() + "-" +((now.getMonth()+1)<10?"0":"")+(now.getMonth()+1)+"-"+(now.getDate()<10?"0":"")+now.getDate() +" 00:00:00";
                var todayETime = now.getFullYear() + "-" +((now.getMonth()+1)<10?"0":"")+(now.getMonth()+1)+"-"+(now.getDate()<10?"0":"")+now.getDate() +" 23:59:59";
                var yesterday=new Date(now- oneday);
                var yesterdaySTime = yesterday.getFullYear() + "-" +((yesterday.getMonth()+1)<10?"0":"")+(yesterday.getMonth()+1)+"-"+(yesterday.getDate()<10?"0":"")+yesterday.getDate() +" 00:00:00";
                var yesterdayETime = yesterday.getFullYear() + "-" +((yesterday.getMonth()+1)<10?"0":"")+(yesterday.getMonth()+1)+"-"+(yesterday.getDate()<10?"0":"")+yesterday.getDate() +" 23:59:59";
                Dao.getAlarmGroupCount({
                    orgIds: id_org,
                    startTimeStr: todaySTime,
                    endTimeStr: todayETime,
                    queryType: 0,
                    dateType: 1,
                    pageSize: 1000,
                    pageIndex: 0
                }, function (data1) {
                    if (data1) {
                        for (var i = 0; i < data1.length; i++) {
                            yArray1.push(data1[i].totalCount);
                            total += data1[i].totalCount * 1;
                        }
                    }
                    Dao.getAlarmGroupCount({
                        orgIds: id_org,
                        startTimeStr: yesterdaySTime,
                        endTimeStr: yesterdayETime,
                        queryType: 0,
                        dateType: 1,
                        pageSize: 1000,
                        pageIndex: 0
                    }, function (data2) {
                        if (data2) {
                            for (var i = 0; i < data2.length; i++) {
                                xArray.push(data2[i].date);
                                yArray2.push(data2[i].totalCount);
                            }
                        }
                        self.drawChart(xArray, yArray1, yArray2);
                    });
                });
            },
            drawChart: function (xArray,yArray1,yArray2) {
                var self = this
                var carChart = echarts.init(document.getElementById('alarmChange_line_chart_' + self.getNewId));
                // var xArray = ['00','01','02','03','04','05','06','07','08','09','10','11','12'];
                // var yArray2 = [120, 132, 101, 134, 290, 230, 210, 132, 101, 134, 290, 230, 210,110];
                // var yArray1=[230, 210, 132, 101, 134, 290];
                carChart.setOption({
                    tooltip: {
                        backgroundColor: '#fff',
                        borderColor: '#F3F3F3C7',       // 提示边框颜色
                        borderRadius: 6,           // 提示边框圆角，单位px，默认为4
                        borderWidth: 1,
                        position: function (p) {   //其中p为当前鼠标的位置
                            return [p[0] - 28, p[1] - 70];
                        },
                        padding: 5,
                        trigger: 'axis',
                        formatter: function (params) {
                            res = "<span style='font-size:15px;'>" + params[0].axisValue + "点报警数</span><br/><span style='font-size:10px;float:left;padding-left:20px;'>" + params[0].seriesName + "：" + params[0].value + "</span><br/>"
                            if (params[1]) {
                                res += "<span style='font-size:10px;float: left;padding-left: 20px;'>" + params[1].seriesName + "：" + params[1].value + "</span>"
                            }
                            return res;
                        },
                        textStyle: { align: 'center', color: '#666666FF' },
                    },
                    /* legend: {
                        x: 'center',
                        y: 'bottom',
                        itemHeight: 10,
                        itemWidth: 10,
                        itemGap: 40,
                        data: [{ name: '昨日', icon: 'rect', color: '#7995b8' }, { name: '今日', icon: 'rect', color: '#378bf6' }]
                    }, */
                    grid: {
                        top: '17%',
                        left: '5%',
                        right: '5%',
                        bottom: '13%',
                        containLabel: true,
                    },
                    xAxis: [
                        {
                            type: 'category',
                            splitLine: {
                                show: false
                            },
                            axisTick: {
                                show: false
                            },
                            boundaryGap: false,
                            axisLine: {//x轴颜色
                                show: true,
                                lineStyle: {
                                    color: 'grey',
                                    width: 1, //这里是为了突出显示加上的
                                }
                            },
                            axisLabel: {//x轴的值
                                show: true,
                                interval: 3,
                                textStyle: {
                                    color: '#666666',
                                    fontSize: 12
                                },
                                formatter: (val) => {
                                    if (val.substring(0, 1) == "0") {
                                        return val.substring(1, 2);
                                    } else {
                                        return val;
                                    }
                                }
                            },
                            data: xArray
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value',
                            splitLine: {
                                show: false
                            },
                            axisLine: {//x轴颜色
                                show: false,
                                lineStyle: {
                                    color: 'red',
                                    width: 1, //这里是为了突出显示加上的
                                }
                            },
                            axisLabel: {//x轴的值
                                show: false,
                                textStyle: {
                                    color: 'white',
                                    fontSize: 12
                                }
                                //interval:xInterval
                            },
                            "axisTick": {       //y轴刻度线
                                "show": false
                            },
                        }
                    ],
                    series: [

                        {
                            name: '今日',
                            type: 'line',
                            stack: '',
                            itemStyle: {
                                normal: {
                                    color: '#378bf6'
                                },
                                emphasis: {
                                    color: '#fff'
                                },
                            },
                            lineStyle: { width: 2 },
                            symbolSize: 1,
                            smooth: true,
                            areaStyle: {
                                color: {
                                    type: 'linear',
                                    x: 0,
                                    y: 0,
                                    x2: 0,
                                    y2: 1,
                                    colorStops: [{
                                        offset: 0,
                                        color: 'rgba(55,139,246,0.6)' // 0% 处的颜色
                                    }, {
                                        offset: 1,
                                        color: 'rgba(55,139,246,0.1)' // 100% 处的颜色
                                    }],
                                    globalCoord: false // 缺省为 false
                                }
                            },
                            data: yArray1,
                            markPoint: {
                                data: [
                                    { type: 'max', name: '最大值' }
                                ],
                                symbolSize: 30,
                                animationDelay: 1000,
                                animationDuration: 1000
                            }
                        },
                        {
                            name: '昨日',
                            type: 'line',
                            stack: '',
                            itemStyle: {
                                normal: {
                                    color: '#7995b8'
                                },
                                emphasis: {
                                    color: '#fff'
                                },
                            },
                            lineStyle: { width: 2 },
                            symbolSize: 1,
                            smooth: true,
                            areaStyle: {
                                color: {
                                    type: 'linear',

                                    x: 0,
                                    y: 0,
                                    x2: 0,
                                    y2: 1,
                                    colorStops: [{
                                        offset: 0,
                                        color: 'white' // 0% 处的颜色
                                    }, {
                                        offset: 1,
                                        color: 'white' // 100% 处的颜色
                                    }],
                                    globalCoord: false // 缺省为 false
                                }
                            },
                            data: yArray2,
                            markPoint: {
                                data: [
                                    { type: 'max', name: '最大值' }
                                ],
                                symbolSize: 30,
                                animationDelay: 1000,
                                animationDuration: 1000
                            }
                        }
                    ]
                });
                
            },
            htmlPage:function(){
                var self = this
                var id_org="";
                if (single_Orgid == "") {
                    id_org=userInfor.organizationIds;
                } else {
                    id_org=single_Orgid;
                }
            	
            	Dao.getAlarmTotalCount({
            		orgIds:id_org,
            		dataType:0,
            	},function(data){
            		if(data) {
            			jQuery("#alarmChange_time_num_" + self.getNewId).html(data.totalCount);
            			jQuery("#alarmChange_noDeal_num_" + self.getNewId).html(data.unHandlerCount);
            			jQuery("#alarmChange_todayDeal_num_" + self.getNewId).html(data.todayInfoNum);
            		}
            	});
            },
        },
        on: {
            pageAfterIn: function(e, page) {
              var self = this;
              self.drawChartData();
              self.htmlPage();
            },
      }
    }
</script>
